<template>
	<view>
		<!-- <view class="moment-save">
			<text>开启业绩提现，你可以时时收到成交提醒</text>
			<view class="">
				开启消息
			</view>
		</view> -->
		<view class="recommend-coupon-content">
			<view class="recommend-coupon-details">
				<view class="">¥{{perforMsg.total}}</view>
				<view class="">成交额(元)</view>
			</view>
			<view class="recommend-coupon-line"></view>
			<view class="recommend-coupon-details">
				<view class="">{{perforMsg.num}}</view>
				<view class="">成交数(个)</view>
			</view>
			<view class="recommend-coupon-line"></view>
			<view class="recommend-coupon-details">
				<view class="">{{perforMsg.people}}</view>
				<view>客户数(人)</view>
			</view>
		</view>
		<view class="person-order-details">
			<view class="person-order-details-title">
				<view class="">
					<view class="explain-title">
						<view class=""></view>
						<view class="">
							我的订单详情
						</view>
					</view>
				</view>
			</view>
			<view class="act-course-content" v-for="(item,index) in orderDetail" :key='index'>
				<view class="group-state-msg">
					<view class="group-state-msg-left">
						<image :src="item.user_info&&item.user_info.avatar" mode=""></image>
						<text>{{item.user_info&&item.user_info.nickname}}</text>
					</view>
					<view class="group-state-msg-right">
						下单时间：<text>{{item.date_added}}</text>
					</view>
				</view>
				<view class="act-course-phone">
					<view class="">
						电话：{{item.customer_telephone}}
					</view>
					<view class="" @click="callPhone(item.customer_telephone)">
						拨打电话
					</view>
				</view>
				<view class="act-course-details" v-if="item.course.length!=0">
					<view class="act-course-details-title">
						<text>课程名称</text>
						<text>数量</text>
						<text>优惠</text>
						<text>金额</text>
					</view>
					<view class="act-course-details-common" v-for="(info,i) in item.course" :key='i'>
						<view class="" style="display: flex;justify-content: space-between;width: 396upx;">
							<text v-if="info.activity_course[0]">{{info.activity_course[0].name}}</text>
							<text>{{info.quantity}}</text>
						</view>
						<view class="" style="display: flex;justify-content: space-between;width: 232upx;text-align: center;">
							<text v-if="info.activity_course.length>0&&item.buy_method==4"></text>
							<text v-else-if="info.activity_course.length>0&&item.buy_method==1">{{info.activity_course[0].origin_price-info.activity_course[0].special_price}}</text>
							<text v-else-if="info.activity_course.length>0&&item.buy_method==2">{{info.activity_course[0].origin_price-info.activity_course[0].group_purchase_price}}</text>
							<text v-else-if="info.activity_course.length>0&&item.buy_method==3">{{info.activity_course[0].origin_price-info.activity_course[0].group_purchase_price}}</text>
							
							<text v-if="info.activity_course.length>0&&item.buy_method==4">{{item.actual_total}}</text>
							<text v-else-if="info.activity_course.length>0&&item.buy_method==1">{{info.activity_course[0].special_price}}</text>
							<text v-else-if="info.activity_course.length>0&&item.buy_method==2">{{info.activity_course[0].group_purchase_price}}</text>
							<text v-else-if="info.activity_course.length>0&&item.buy_method==3">{{info.activity_course[0].group_purchase_price}}</text>
							<!-- <text >{{JSON.stringify(info.activity_course)}}</text> -->
						</view>
					</view>
				</view>
				<view class="give-content" v-if="item.course.has_xiaoyu_card">
					<view class="act-course-details-title" style="justify-content: space-between;">
						<text>赠品名称</text>
						<text>赠送购物卡金额</text>
					</view>
					<view v-if="parseFloat(info.activity_course.cash_shopping_card_amount)>0" class="give-content-details" v-for="(info,i) in item.course" :key='i'>
						<text>小鱼购物卡</text>
						<text>¥{{info.activity_course.cash_shopping_card_amount}}</text>
					</view>
				</view>
				<view class="act-course-salesman">
					<view class="act-course-salesman-img">
						<image :src="perforMsg.customer.avatar" mode=""></image>
						<text>{{perforMsg.customer.nickname}}</text>
						<view class="">
							业务员
						</view>
					</view>
					<view class="act-course-salesman-tip" :data-order_id="item.order_id" @click="handleShowSignupInfo(item.order_id)">
						查看报名信息
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				actCourseHeader:[
					{name:'新东方GRE课程8节线下体验课，双十二特权活动…',num:'×1',coupon:'-￥30.0',money:'¥168.00'},
					{name:'新东方GRE课程8节线下体验课，双十二特权活动…',num:'×1',coupon:'-¥30.0',money:'¥168.00'},
					{name:'新东方GRE课程8节线下体验课，双十二特权活动…',num:'×1',coupon:'赠送',money:'¥168.00'},
				],
				actCourseMember:[
					{name:'新东方GRE课程8节线下体验课，双十二特权活动…',num:'×1',coupon:'',money:'¥168.00'},
				],
				perforMsg:'',
				orderDetail:[],
				store_id:'',
				index:[]
			}
		},
		onLoad(options) {
			let store_id = parseInt(options.store_id,10);
			console.log('进入了onload 获取url的store_id',store_id)
			if(!store_id > 0){
				store_id = uni.getStorageSync('store_id')?parseInt(uni.getStorageSync('store_id'),10):0
			}else{
				uni.setStorageSync('store_id', store_id)
			}
			
			this.store_id = parseInt(store_id,10)
			this.$store.commit('updateStoreId',store_id)
			this.gainPerfor()
		},
		methods:{
			callPhone(tel){
				uni.makePhoneCall({
					phoneNumber:tel,
					success(res) {
						console.log(res)
					},
					fail(err) {
						console.log(err)
					}
				})
			},
			gainPerfor(){
				let data = {
					token:this.$store.getters.getToken,
					
				}
				this.$api.gain_perfor(data).then(res => {
					console.log(res,'gain_perfor')
					this.index=[]
					if(res.status){
						this.perforMsg = res.data
						let orderDetail = res.data.order
						console.log("orderDetail",orderDetail)
						if(orderDetail.length>0){
							for(let j=0;j<orderDetail.length;j++){
								if(orderDetail[j].type == 0 || orderDetail[j].pay_status){
									this.index.push(j)
									console.log("发现一个")
								}
							}
							let indexList = this.index
							console.log("indexList",this.index)
							for(let z=0;z<indexList.length;z++){
								orderDetail.splice(indexList[z],1)
							}
							for(let i=0;i<orderDetail.length;i++){
								const courses = orderDetail[i].course
								orderDetail[i].has_xiaoyu_card = false
								for(let j=0;j<courses.length;j++){
									if(parseFloat(courses[j].shopping_card_amount)>0){
										orderDetail[i].has_xiaoyu_card = true
										break;
									}
								}
							}
						}
						// console.log(orderDetail,'orderDetail')
						this.orderDetail = orderDetail
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none',
							duration:2000
						})
					}
				}).catch(err => {
					console.log(err)
				})
			},
			handleShowSignupInfo(order_id){
				console.log(order_id,'order_id')
				uni.redirectTo({
					url:'/pages/memberCenter/personPerformance/signupInfo?store_id='+this.store_id+'&order_id='+order_id
				})
			}
		}
	}
</script>

<style>
	page{
		background: #F3F3F4;
	}
	.moment-save{
		width: 100%;
		height: 56upx;
		line-height: 56upx;
		padding: 0 80upx ;
		box-sizing: border-box;
		display: flex;
		background: #FFF7D8;
	}
	.moment-save>text{
		color: #666666;
		font-size: 24upx;
	}
	.moment-save>view{
		width: 128upx;
		height: 38upx;
		line-height: 38upx;
		text-align: center;
		border: 2upx solid #FF8B46;
		color: #FF8B46;
		font-size: 24upx;
		margin-left: 20upx;
		margin-top: 6upx;
	}
	.recommend-coupon-content{
		width: 100%;
		background: #FFFFFF;
		display: flex;
		justify-content: space-between;
		padding: 40upx 0 30upx;
		box-sizing: border-box;
	}
	.recommend-coupon-details{
		flex-grow: 1;
		text-align: center;
	}
	.recommend-coupon-details>view:first-child{
		color: #333333;
		font-size: 36upx;
	}
	.recommend-coupon-details>view:last-child{
		color: #999999;
		font-size: 24upx;
	}
	.recommend-coupon-line{
		width: 2upx;
		height: 46upx;
		border-left: 2upx solid #EFEFEF;
		margin-top: 22upx;
	}
	.person-order-details{
		width: 100%;
		margin-top: 20upx;
	}
	.person-order-details-title{
		width: 100%;
		background: #FFFFFF;
		padding: 0 30upx;
		box-sizing: border-box;
	}
	.person-order-details-title>view{
		width: 100%;
		padding: 30upx 0 10upx;
		box-sizing: border-box;
	}
	.explain-title{
		display: flex;
	}
	.explain-title>view:first-child{
		width: 8upx;
		height: 32upx;
		background: #FF8B46;
		vertical-align: middle;
		margin-top: 6upx;
	}
	.explain-title>view:last-child{
		color: #333333;
		font-size: 34upx;
		margin-left: 16upx;
	}
	.act-course-content{
		width: 100%;
		padding: 22upx 30upx 30upx;
		box-sizing: border-box;
		background: #FFFFFF;
		margin-bottom: 20upx;
	}
	.act-course-phone{
		display: flex;
		justify-content: space-between;
	}
	.act-course-phone>view:first-child{
		color: #666666;
		font-size: 28upx;
		margin-left: 100upx;
		line-height: 40upx;
	}
	.act-course-phone>view:last-child{
		width: 120upx;
		height: 40upx;
		line-height: 40upx;
		text-align: center;
		color: #FFFFFF;
		font-size: 24upx;
		background: linear-gradient(to right,#FE9543,#FF664F);
		border-radius: 4upx;
		box-shadow: 0 8upx 16upx 0 rgba(166, 13, 0, 0.23);
	}
	.act-course-details{
		margin-top: 40upx;
	}
	.act-course-details-title{
		width: 100%;
		height: 64upx;
		line-height: 64upx;
		display: flex;
		padding: 0 28upx 0 20upx;
		box-sizing: border-box;
		background: #F4F5F9;
	}
	.act-course-details-title>text{
		display: inline-block;
		color:#666666;
		font-size: 24upx;
	}
	.act-course-details-title>text:nth-child(2){
		margin-left: 240upx;
	}
	.act-course-details-title>text:nth-child(3){
		margin-left: 76upx;
	}
	.act-course-details-title>text:nth-child(4){
		margin-left:86upx;
	}
	.act-course-details-common,.give-content-details{
		width: 100%;
		padding: 20upx 0 18upx;
		box-sizing: border-box;
		justify-content: space-between;
		border-bottom: 1upx solid #DEDEDE;
		display: flex;
	}
	.act-course-details-common text{
		display: inline-block;
		color: #333333;
		font-size: 28upx;
	}
	.act-course-details-common>view:first-child>text:nth-child(1){
		width: 284upx;
		font-size: 24upx;
	}
	/* .act-course-details-common>text:nth-child(3){
		color: #FF391F;
		margin-left: 20upx;
	} */
	.give-content{
		margin-top: 30upx;
	}
	.give-content-details>text{
		color: #FF391F;
		font-size: 24upx;
	}
	.act-course-salesman{
		width: 100%;
		background: #F4F5F9;
		height: 80upx;
		/* border-radius: 200upx 0 0 200upx; */
		display: flex;
		justify-content: space-between;
		margin-top: 30upx;
		padding:8upx;
		align-items: center;
	}
	.act-course-salesman-tip{
		/* color: #999999;
		font-size: 24upx;
		line-height: 80upx;
		margin-right: 20upx; */
		width: 180upx;
		height: 52upx;
		line-height: 52upx;
		text-align: center;
		color: #fff;
		font-size: 12px;
		background: -webkit-linear-gradient(left,#fe9543,#ff664f);
		background: linear-gradient(90deg,#fe9543,#ff664f);
		border-radius: 2px;
		box-shadow: 0 4px 8px 0 rgba(166,13,0,.23);
		margin:0 18upx;
	}
	.act-course-salesman-img{
		display: flex;
	}
	.act-course-salesman-img>image{
		width: 80upx;
		height: 80upx;
		border-radius: 50%;
	}
	.act-course-salesman-img>text{
		display: inline-block;
		color: #333333;
		font-size: 28upx;
		margin-left: 20upx;
		line-height: 80upx;
	}
	.act-course-salesman-img>view{
		width: 78upx;
		height: 28upx;
		line-height: 28upx;
		text-align: center;
		color: #FF8B46;
		border: 1upx solid #FF8B46;
		font-size: 22upx;
		margin-top: 24upx;
		margin-left: 10upx;
	}
	.group-bad{
		margin-top: 30upx;
		color: #FF391F;
		font-size: 24upx;
	}
	.adjust-succed{
		line-height: 44upx;
		color: #FE8846;
		font-size: 24upx;
		text-align: center;
		width: 200upx;
		height: 44upx;
		border: 2upx solid #FE8846;
		margin-top: 20upx;
	}
	.group-state-msg{
		display: flex;
		justify-content: space-between;
	}
	.group-state-msg-left{
		display: flex;
		
		
	}
	.group-state-msg-left>text{
		display: block;
		width:180upx;
		color: #333333;
		font-size: 28upx;
		margin-left: 20upx;
		height:80upx;
		line-height: 80upx;
		overflow:hidden;
		text-overflow:ellipsis;
		white-space:nowrap;
	}
	.group-state-msg-left>image{
		width: 80upx;
		height: 80upx;
		border-radius: 50%;
	}
	.group-state-msg-right{
		color: #666666;
		font-size: 24upx;
		line-height: 80upx;
	}
	.group-state-msg-right>text{
		color: #333333;
	}
</style>
